<template>
  <div class="message-list">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" style="height: 100%;">
      <div class="message-list-content">
        <!-- 搜索框 -->
        <SearchInput />
        <!-- 消息列表 -->
        <!-- 空状态 -->
        <van-empty
          class="custom-image"
          :image="noMessage"
          image-size="5.3333rem"
          v-if="msgList.length === 0"
        />
        <!-- 消息列表不为空 -->
        <ul v-else>
          <li
            v-for="(item, index) in msgList"
            :key="index"
            @click="goMsgDetails(item._id, item.type)"
          >
            <div class="user-pic">
              <img :src="$baseUrl + item.imgUrl" alt="" />
            </div>
            <div class="list-info">
              <div class="info-top">
                <div class="user-nick">{{ item.nick || item.groupName }}</div>
                <div class="time">{{ item.lastMsg.time }}</div>
              </div>
              <div class="info-bottom">
                <!-- 文字 -->
                <div class="message-text" v-if="item.lastMsg.msgType == 0">{{ item.lastMsg.message }}</div>
                <!-- 图片 -->
                <div class="message-text pic" v-else>[图片]</div>
                <div class="dots" v-show="item.unreadMsgCount">{{ item.unreadMsgCount }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import SearchInput from "@/components/SearchInput"
import { reqGetMessageList } from '@/api'
import { mapState } from "vuex"
import { formatDate } from '@/utils'
export default {
  components: {
    SearchInput
  },
  data() {
    return {
      isLoading: false,
      msgList: [],
      noMessage: './images/no_message.png',
      messageNotice: 0
    }
  },
  computed: {
    ...mapState({
      userId: state => state.login.userInfo._id
    })
  },
  methods: {
    // 获取消息页列表
    async getMessageList() {
      this.messageNotice = 0
      let res = await reqGetMessageList({userId: this.userId})
      if (res.status === 200) {
        res.data.forEach(i => {
          i.lastMsg.time = formatDate(i.lastMsg.time)
          if (i.unreadMsgCount) {
            this.messageNotice = this.messageNotice + i.unreadMsgCount
          }
        })
        this.msgList = res.data
        this.$store.commit('notice/getMessageNotice', this.messageNotice)
      }
    },
    // 去聊天详情页
    goMsgDetails(_id, type) {
      this.$router.push({
        path: "/messagedetails/" + type,
        query: {
          _id
        }
      })
    },
    // 下拉刷新回调
    onRefresh() {
      this.getMessageList()
      setTimeout(() => {
        this.isLoading = false
      }, 1000)
    }
  },
  mounted() {
    this.getMessageList()
  },
  sockets: {
    unread_message() {
      this.getMessageList()
    }
  }
}
</script>

<style lang="less" scoped>
.message-list {
  width: 100%;
  height: 100vh;
  padding: 1.3333rem 0.4rem 1.3333rem;
  box-sizing: border-box;
}
.message-list-content {
  width: 100%;
  height: 100%;
  padding-top: .2667rem;
  box-sizing: border-box;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.message-list-content::-webkit-scrollbar {
  display: none;
}
ul {
  width: 100%;
  li {
    width: 100%;
    height: 1.8rem;
    display: flex;
    align-items: center;
    .user-pic {
      width: 1.2667rem;
      height: 1.2667rem;
      border-radius: 50%;
      margin-right: 0.2667rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .list-info {
      flex: 1;
      height: 1.2667rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      overflow: hidden;
      .info-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user-nick {
          font-size: 0.4rem;
        }
      }
      .info-bottom {
        width: 100%;
        height: .5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .message-text {
          width: 100%;
          height: .5rem;
          overflow: hidden;
          flex: 1;
          font-size: 0.3333rem;
          line-height: 0.5rem;
        }
        .pic {
          color: #9f9f9f;
        }
        .dots {
          width: 0.5rem;
          height: 0.5rem;
          background-color: #f06262;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
        }
      }
    }
  }
}
</style>
<style>
.custom-image .van-empty__image {
  margin-top: 1.3333rem;
}
</style>